<template>
  <div>
    <!-- 添加页面 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">发布商品</el-button>
      </div>
    </div>

    <div class="addVal">
      <div class="switch">
        <h3>基本信息</h3>
        <div>
          <span style="font-size: 14px">设为热门推荐</span>
          <el-switch
            v-model="value3"
            inline-prompt
            active-text="热门"
            inactive-text="否"
            size="large"
            style="margin: 0 20px; --el-switch-on-color: #13ce66"
          />
          <span style="font-size: 14px">设为产品精选</span>
          <el-switch
            v-model="value2"
            inline-prompt
            active-text="精选"
            inactive-text="否"
            size="large"
            style="margin: 0 20px; --el-switch-on-color: #13ce66"
          />
        </div>
      </div>
      <hr />

      <!-- 表单 -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="商品分类" prop="region">
          <el-select
            v-model="ruleForm.region"
            placeholder="请选择商品分类"
            style="width: 450px; height: 36px"
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
          <el-button
            type="primary"
            style="margin-left: 10px"
            @click="toSortAdd()"
          >
            <el-icon>
              <Plus />
            </el-icon>
            添加分类
          </el-button>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input
            placeholder="请填写商品名称"
            v-model="ruleForm.name"
            style="width: 450px; height: 36px"
          />
        </el-form-item>

        <el-form-item label="产品卖点" prop="desc">
          <el-input
            v-model="ruleForm.desc"
            placeholder="请填写产品卖点"
            type="textarea"
          />
        </el-form-item>
        <span
          style="
            width: 428px;
            height: 12px;
            margin-left: 120px;
            font-size: 12px;
            font-weight: 400;
            color: #abb3c3;
          "
          >产品卖点可填写对产品的特色和主打优势进行说明突出的补充说明，最多150字符</span
        >

        <el-form-item label="关  键  词" prop="desc" class="demo-input-size">
          <el-input
            v-model="ruleForm.desc"
            style="width: 150px; height: 36px"
            placeholder="请填写"
          />
          <el-input
            v-model="ruleForm.desc"
            style="width: 150px; height: 36px; margin: 0 10px"
            placeholder="请填写"
          />
          <el-input
            v-model="ruleForm.desc"
            style="width: 150px; height: 36px"
            placeholder="请填写"
          />
          <el-input
            v-model="ruleForm.desc"
            style="width: 150px; height: 36px; margin-left: 10px"
            placeholder="请填写"
          />
        </el-form-item>

        <el-form-item style="font-style: 12px; color: #abb3c3">
          <p>
            1.
            这是买家搜索的核心词，您可以从信息标题中提炼出中心词，注意不要过长
          </p>
          <p>
            2.
            尽量使用市场上或行业内的常用词，或填写产品的通称/别称，以便符合买家的搜索习惯
          </p>
        </el-form-item>

        <el-form-item label="商品属性">
          <div class="demo-box">
            <el-form-item label="商品特性：" prop="name">
              <el-input class="w25" placeholder="请填写产品特性"></el-input>
            </el-form-item>

            <el-form-item label="型号：" prop="name">
              <el-input class="w25" placeholder="请填写产品型号"></el-input>
            </el-form-item>

            <el-form-item label="样式：" prop="name">
              <el-select
                class="w25"
                v-model="ruleForm.region"
                placeholder="请选择产品样式"
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>

            <el-form-item label="护罩总宽度：" prop="name">
              <el-input class="w25" placeholder="请填写护照总宽度">
                <template #append>.mm</template>
              </el-input>
            </el-form-item>

            <el-form-item label="防护部位：" prop="name">
              <el-select
                class="w25"
                v-model="ruleForm.region"
                placeholder="请选择防护部位"
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>

            <el-form-item label="品牌：" prop="name">
              <el-input class="w25" placeholder="（非必填）"></el-input>
            </el-form-item>

            <el-form-item label="拉伸后长度：" prop="name">
              <el-input class="w25" placeholder="（非必填）">
                <template #append>.mm</template>
              </el-input>
            </el-form-item>

            <el-form-item label="压缩后长度：" prop="name">
              <el-input class="w25" placeholder="（非必填）">
                <template #append>.mm</template>
              </el-input>
            </el-form-item>

            <el-form-item label="行程长度：" prop="name">
              <el-input class="w25" placeholder="（非必填）">
                <template #append>.mm</template>
              </el-input>
            </el-form-item>

            <el-form-item label="护罩内宽度：" prop="name">
              <el-input class="w25" placeholder="（非必填）">
                <template #append>.mm</template>
              </el-input>
            </el-form-item>

            <el-form-item label="护罩内高度：" prop="name">
              <el-input class="w25" placeholder="（非必填）">
                <template #append>.mm</template>
              </el-input>
            </el-form-item>

            <el-form-item label="导轨高度：" prop="name">
              <el-input class="w25" placeholder="（非必填）">
                <template #append>.mm</template>
              </el-input>
            </el-form-item>

            <el-form-item label="导轨宽度：" prop="name">
              <el-input class="w25" placeholder="（非必填）">
                <template #append>.mm</template>
              </el-input>
            </el-form-item>

            <el-form-item label="适用机床：" prop="name">
              <el-select
                class="w25"
                v-model="ruleForm.region"
                placeholder="（非必填）"
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>

            <el-form-item label="是否库存：" prop="name">
              <el-select
                class="w25"
                v-model="ruleForm.region"
                placeholder="（非必填）"
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>

            <el-form-item label="是否批发：" prop="name">
              <el-select
                class="w25"
                v-model="ruleForm.region"
                placeholder="（非必填）"
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>

        <h3>销售信息</h3>
        <hr />
        <el-form-item label="价格">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="面议" name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="单位" prop="name">
          <el-select v-model="ruleForm.region" placeholder="件">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="供货总量" prop="name">
          <el-input class="w25" placeholder="请选择单位">
            <template #append>.mm</template>
          </el-input>
        </el-form-item>

        <h3>主图和详细说明</h3>
        <hr />

        <!-- 上传图片 -->
        <el-form-item label="商品主图" style="margin-top: 20px">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <img
              src="../../../assets//img/35.png"
              style="width: 32px; height: 24px"
              alt=""
            />

            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon>
                      <Download />
                    </el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <!-- 上传视频 -->
        <el-form-item label="商品视频">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <img
              src="../../../assets//img/35.png"
              style="width: 32px; height: 24px"
              alt=""
            />

            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon>
                      <Download />
                    </el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <!-- 富文本编辑器 -->
        <el-form-item>
          <div class="Richtext">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                :mode="mode"
              />
              <Editor
                style="height: 558px"
                v-model="valueHtml"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="handleCreated"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item class="footer">
          <el-button
            style="margin-left: 380px"
            type="primary"
            @click="submitForm(ruleFormRef)"
          >
            提交
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const router = useRouter();
const formSize = ref("default");
const ruleFormRef = ref();
// 开关
const value3 = ref(true);
const value2 = ref(false);

// 数据
const ruleForm = reactive({
  name: "Hello", //商品名称
  region: "", //商品分类
  desc: "", //产品卖点
  type: [],
});

// 表单验证
const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

// 确定
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 取消
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 图片上传
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file) => {
  console.log(file);
};

const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const handleDownload = (file) => {
  console.log(file);
};

// 跳转
const toSortAdd = () => {
  router.push("/commoditySortAdd");
};

//  富文本
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("<p>hello</p>");

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>
<style>
/* 图片上传大小修改 */
.el-upload--picture-card {
  --el-upload-picture-card-size: 60px !important;
}
.el-textarea__inner {
  width: 450px;
  height: 100px;
  background: #ffffff;
  border: 1px solid #dcdfe5;
  border-radius: 4px;
}
</style>
<style lang="scss" scoped>
.addVal {
  // width: 1610px;
  height: 2416px;
  background: #ffffff;
  border-radius: 0px;
  margin-left: 10px;

  .switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  h3 {
    border-left: 3px solid #2a92f2;
    padding-left: 20px;
    margin-bottom: 20px;
  }

  .demo-ruleForm {
    margin-top: 20px;
  }
}

.demo-input-size {
  display: flex;
}

.demo-box {
  width: 790px;
  height: 786px;
  background: #f8f8f8;
  opacity: 1;
  border-radius: 4px;
}

.w25 {
  width: 250px;
  height: 36px;
  margin: 10px 0 0 0;
}

.footer {
  // width: 1610px;
  height: 80px;
  background: #ffffff;
  box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
  opacity: 1;
  border-radius: 0px;
  padding-left: 230px;
  box-sizing: border-box;
}
</style>
